<template>
  <basic-dialog
    top="8vh"
    width="85%"
    title="关联品类标签"
    :visible="visible"
    :show-footer="false"
    :handleClose="handleClose"
  >
    <el-row type="flex">
      <div class="left-col">
        <ListTree
          v-loading="treeList.loading"
          :panel-props="treeList.props"
          :options="treeList.options"
          @change="handleTreeChange"
        />
      </div>
      <div class="right-col">
        <ResultHeader
          v-loading="resultLoading"
          :result-list="resultList"
          @confirm="handleConfirm"
          @clear="clearResultList"
        />
        <el-divider />
        <ListResult
          :data-source="resultList"
          @update="updateResultList"
        />
      </div>
    </el-row>
  </basic-dialog>
</template>
<script>
import BasicDialog from '@/components/BasicDialog';
import ListTree from './ListTree';
import ListResult from './ListResult';
import ResultHeader from './ResultHeader';
import {
  cateLabelQueryTreeDataService,
  queryLabelByCategoryUuidService
} from '@/api/public';
export default {
  components: {
    BasicDialog,
    ListTree,
    ListResult,
    ResultHeader,
  },
  props: {
    // 弹窗显示隐藏
    visible: {
      type: Boolean,
      default: false,
    },
    // 品类uuid
    categoryUuid: {
      type: String,
      default: '',
    },
  },
  data () {
    return {
      treeList: {
        loading: false,
        options: [],
        props: {
          value: 'uuid',
          label: 'name',
        },
      },
      resultList: [], // 选中的标签集合
      resultLoading: false, // 结果集合loading
    }
  },
  watch: {
    visible: {
      handler (val) {
        if (val) {
          this.updateTreeList()
          this.updateAssociatedLabels()
        }
      },
      immediate: true,
    },
  },
  methods: {
    // 关闭弹窗
    handleClose () {
      this.$emit('update:visible', false)
    },
    // 选中节点
    handleTreeChange (data) {
      const setResultList = () => {
        this.resultList = _.uniqBy([...this.resultList, data], 'uuid')
      }
      if (!data?.parentUuid) return setResultList()
      const index = this.resultList.findIndex(item => item.parentUuid == data.parentUuid)
      index > -1 ? this.resultList.splice(index, 1, data) : setResultList()
    },
    // 确定
    handleConfirm () {
      this.handleClose()
      const uuids = []
      const names = []
      this.resultList.forEach(item => {
        uuids.push(item.uuid)
        names.push(item.name)
      })
      const data = {
        list: this.resultList,
        uuids,
        names
      }
      this.$emit('confirm', data)
    },
    // 更新标签树集合
    async updateTreeList () {
      const loadingFn = state => { this.treeList.loading = state }
      const res = await cateLabelQueryTreeDataService({}, loadingFn)
      this.treeList.options = res?.retData ?? []
    },
    // 更新已关联标签集合
    async updateAssociatedLabels () {
      if (!this.categoryUuid) return this.resultList = []
      const data = { categoryUuid: this.categoryUuid }
      const loadingFn = state => { this.resultLoading = state }
      const res = await queryLabelByCategoryUuidService(data, loadingFn)
      this.resultList = res?.retData ?? []
    },
    // 更新结果集合
    updateResultList (list) {
      this.resultList = list
    },
    // 清空结果集合
    clearResultList () {
      this.resultList = []
    },
  }
}
</script>
<style lang="less" scoped>
/deep/ .el-divider--horizontal {
  margin: 10px 0;
}
.left-col {
  min-width: 50%;
  border-right: 1px dashed #dadada;
  padding-right: 20px;
}
.right-col {
  width: 100%;
  padding: 10px;
  margin-left: 10px;
}
</style>
